<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐云播放器</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            overflow: hidden;
        }
        
        #imgbg {
            background: url('https://i.loli.net/2020/03/23/QEL4rdy5KCsn3cz.png') no-repeat;
            position: absolute;
            left: 0;
            top: 0;
            transition: all .45s ease-in;
        }
        
        #app {
            margin: 40px auto;
            width: 1200px;
            height: 600px;
            backdrop-filter: blur(40px);
            background: rgba(255, 255, 255, 0.7);
            border-radius: 25px;
        }
        
        #header {
            line-height: 50px;
            padding: 0 10px 0 10px;
            height: 50px;
            background-color: #db1e1ed9;
            border-radius: 25px 25px 0 0;
        }
        
        #header>span {
            font-family: 'Courier New', Courier, monospace;
        }
        
        .content {
            display: flex;
            justify-content: space-between;
        }
        
        .content_left {
            width: 250px;
            height: 500px;
        }
        
        .content_right {
            width: 250px;
            height: 500px;
        }
        
        .switch_left {
            float: right;
        }
        
        .switch_right {
            float: left;
        }
        
        #footer {
            background: #f1f3f4;
            border-radius: 0 0 10px 10px;
        }
        
        .myaudio {
            width: 1200px;
            outline: none;
            color: #1eacda;
            border-radius: 2px;
        }
        
        #search {
            width: 200px;
            height: 30px;
            float: right;
            border: none;
            border-radius: 25px;
            margin-right: 10px;
            margin-top: 10px;
            outline: none;
            padding: 0 20px 0 20px;
        }
        
        #but_box {
            margin-top: 15px;
            margin-right: 50px;
            width: 30px;
            height: 30px;
            background-color: #1eacda;
            vertical-align: middle;
            border: none;
            outline: none;
            background: url('https://i.loli.net/2020/03/23/9FeKnVlohsY3krO.png') no-repeat;
            float: right;
            cursor: pointer;
        }
        
        li {
            list-style: none;
        }
        
        .content_left_ul::-webkit-scrollbar {
            display: none;
        }
        
        .content_left_ul>li {
            margin-left: 10px;
            margin-top: 4px;
            width: 200px;
            height: 40px;
            background: transparent;
            border-radius: 20px;
            line-height: 40px;
            padding-left: 20px;
        }
        
        .content_left_ul>li:nth-child(even) {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .content_left_ul {
            float: left;
            width: 240px;
            overflow: scroll;
            height: 500px;
            background: transparent;
        }
        
        .content_left_a {
            margin-right: 10px;
            display: inline-block;
            width: 17px;
            height: 17px;
            background-image: url(https://i.loli.net/2020/03/23/chJ89uNpofneFrS.png);
            background-size: 100%;
            margin-right: 0px;
            box-sizing: border-box;
            cursor: pointer;
            vertical-align: middle;
        }
        
        .content_left_ul>li>span {
            display: inline-block;
            width: 120px;
            height: 26px;
            margin-left: 10px;
            font-size: 14px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        
        .content_conter {
            width: 700px;
            height: 500px;
        }
        
        .img_statr {
            text-align: center;
            position: relative;
            width: 255px;
            height: 255px;
            left: 200px;
            top: 100px;
            background: transparent;
            transition: all 10s ease-in-out;
        }
        
        .img_statr>img:nth-child(1) {
            position: absolute;
            z-index: 999;
            left: 0;
            top: 0;
        }
        
        .img_statr>img:nth-child(2) {
            width: 150px;
            height: 150px;
            left: 50px;
            top: 50px;
            position: absolute;
        }
        
        .content_right_ul {
            float: right;
            width: 220px;
            overflow: scroll;
            height: 500px;
            background: transparent;
            padding: 10px;
        }
        
        .content_right_ul::-webkit-scrollbar {
            display: none;
        }
        
        .content_right_ul>li {
            margin-top: 10px;
        }
        
        .content_right_ul>li>img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            vertical-align: middle;
        }
        
        .content_right_ul>li>span {
            margin-left: 10px;
            display: inline-block;
            width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
        }
        
        .content_right_ul>li>p {
            margin-top: 10px;
            font-size: 10px;
            color: #0d613e;
        }
        /* 旋转动画 */
        /* 旋转的动画 */
        
        @keyframes Rotate {
            from {
                transform: rotateZ(0);
            }
            to {
                transform: rotateZ(360deg);
            }
        }
        /* 旋转的类名 */
        
        .autoRotate {
            animation-name: Rotate;
            animation-iteration-count: infinite;
            animation-play-state: paused;
            animation-timing-function: linear;
            animation-duration: 10s;
        }
        
        .playing .autoRotate {
            animation-play-state: running;
        }
    </style>

</head>

<body>
    <div id="imgbg"></div>
    <div id="app">
        <div id="header">
            <span>洪潇涵播放器</span>
            <button id="but_box" @click="queryMusic(searchMusic)" :searchMusic="searchMusic"></button><input placeholder="请搜索你喜欢的音乐" @keyUp="enterDown(searchMusic,$event)" type="text" id="search" autocomplete="off" v-model="searchMusic">
        </div>
        <div class="content">
            <div class="content_left">
                <ul class="content_left_ul">
                    <li v-for="music in musicList">
                        <a class="content_left_a" @click="statrMusic(music.id)"></a><span>{{music.name}}</span>
                    </li>
                </ul>
                <img src="https://i.loli.net/2020/03/23/dor23bhZtIvK17X.png" class="switch_left">
            </div>
            <div class="content_conter">
                <div id="bgReplace" :class={img_statr:true,playing:isPlay}>
                    <img class="autoRotate" src="https://i.loli.net/2020/03/23/hQPuH4gNRx7XayI.png">
                    <img class="autoRotate" :src="coverUrl == ''? 'https://i.loli.net/2020/03/23/QEL4rdy5KCsn3cz.png':coverUrl">
                </div>

            </div>
            <div class="content_right">
                <ul class="content_right_ul">
                    <li v-for="comment in hotComments">
                        <img :src="comment.user.avatarUrl"><span>{{comment.user.nickname}}</span>
                        <p>{{comment.content}}</p>
                    </li>
                </ul>
                <img src="https://i.loli.net/2020/03/23/dor23bhZtIvK17X.png" class="switch_right">
            </div>
        </div>
        <div id="footer">
            <audio @play="play" @pause="pause" v-bind:src="musicUrl" controls="controls" autoplay="autoplay" loop="loop" class="myaudio"></audio>
        </div>

    </div>

</body>

</html>

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

<script>
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    const app = new Vue({
        //挂载区
        el: '#app',
        //状态变量区
        data: {
            searchMusic: '',
            musicList: [],
            musicUrl: '',
            coverUrl: '',
            hotComments: [],
            // 是否正在播放
            isPlay: false,
        },

        //方法区
        methods: {
            // audio的play事件
            play() {
                this.isPlay = true
                    // 清空mv的信息
                this.mvUrl = ''
            },
            // audio的pause事件
            pause() {
                this.isPlay = false
            },
            queryMusic(searchMusic) {
                axios.get('/search?keywords=' + searchMusic).then(response => {
                    this.searchMusic = '';
                    this.musicList = response.data.result.songs;
                })
            },
            statrMusic(musicId) {
                this.isPlay = true;
                axios.get('/song/url?id=' + musicId).then(response => {
                        // 保存歌曲url地址
                        this.musicUrl = response.data.data[0].url
                    })
                    // 获取歌曲热门评论
                axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
                    // 保存热门评论
                    this.hotComments = response.data.hotComments;
                    // console.log(response);
                })

                // 获取歌曲封面
                axios.get('/song/detail?ids=' + musicId).then(response => {
                    // 设置封面
                    this.coverUrl = response.data.songs[0].al.picUrl
                })

            },
            enterDown(searchMusic, event) {
                if (event.keyCode === 13) {
                    axios.get('/search?keywords=' + searchMusic).then(response => {
                        // 保存内容
                        // console.log(response);
                        this.musicList = response.data.result.songs;
                        this.searchMusic = '';
                    })
                }

            }

        },
        created() {
            axios.get('/search?keywords=好想再爱这个世界').then(response => {
                // 保存内容
                // console.log(response);
                this.musicList = response.data.result.songs;
            })
        },
    })
</script>

<script>
    window.onload = function() {
        var imgbg = document.getElementById('imgbg');
        imgbg.style.height = document.documentElement.clientHeight + 'px';
        imgbg.style.width = document.documentElement.clientWidth + 'px';
        imgbg.style.backgroundSize = document.documentElement.clientWidth + 'px'
        document.documentElement.clientHeight + 'px';

        var bgReplace = document.getElementById('bgReplace');
        var a = document.getElementsByClassName('content_left_a');
        var audio = document.getElementsByTagName('audio');
        bgReplace.onclick = function() {
            imgbg.style.background = 'url(' + bgReplace.children[1].src + ')  no-repeat';
            imgbg.style.height = document.documentElement.clientHeight + 'px';
            imgbg.style.width = document.documentElement.clientWidth + 'px';
            imgbg.style.backgroundSize = document.documentElement.clientWidth + 'px'
            document.documentElement.clientHeight + 'px';
        }
        audio[0].onpause = function() {
            imgbg.style.filter = 'blur(0px)';
            imgbg.style.transform = 'scale(1)';
        }
        audio[0].onplay = function() {
            imgbg.style.filter = 'blur(5px)';
            imgbg.style.transform = 'scale(1.15)';
        }

        for (let i = 0; i < a.length; i++) {
            a[i].onclick = function() {
                imgbg.style.filter = 'blur(5px)';
                imgbg.style.transform = 'scale(1.15)';
            }
        }

    }
</script>